import React, { Component } from 'react';
import "../styles/Yonghu_xiang.scss"
import * as service from "../api/index"
import { NavBar } from 'antd-mobile'



class Yonghu_xiang extends Component {
    state = {
        one: [],
        wenda: []
    }
    async componentDidMount() {
        //下面盒子
        var res = await service.gong_xia()
        console.log(res.data.list[0]);
        this.setState({ one: res.data.list[0] },)

        //攻略问答
        var res1 = await service.my_wenda()
        console.log(res1.data.list);
        this.setState({ wenda: res1.data.list },)
    }
    render() {
        var { pic, dizhi, jieshao, title, name } = this.state.one
        return (
            <div className='yonghu_xiangqiang'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}></NavBar>
                </div>
                <div className="user">
                    <div className="tu">
                        <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/%E5%A4%B4%E5%83%8F_u1900.png" alt="" />
                    </div>
                    <div className="you">
                        <h2>西瓜</h2>
                        <p>一起旅游，一起happy</p>
                        <p>📌 长沙</p>
                    </div>
                </div>
                <div className="fensi">
                    <div className="one">
                        <p>321k</p>
                        <p>粉丝</p>
                    </div>
                    <div className="one">
                        <p>298</p>
                        <p>关注</p>
                    </div>
                    <div className="one">
                        <span>+ 关注</span>
                    </div>
                </div>
                <div className="lvyou">
                    <div className="top">
                        <h2>旅游攻略</h2>
                        <p onClick={() => { this.props.history.push('/quanbugonglue') }}>查看全部</p>
                    </div>
                    <div className="xia_box">
                        <div className="zuo">
                            <img src={pic} alt="" />
                        </div>
                        <div className="you">
                            <h4>{dizhi} | {title}</h4>
                            <p>{jieshao}</p>
                            <p>{name}</p>
                        </div>
                    </div>

                </div>
                <div className="shouji">
                    <div className="top">
                        <h2>旅行手记</h2>
                        <p onClick={() => { this.props.history.push('/quanbushouji') }}>查看全部</p>
                    </div>
                    <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1852.png" alt="" />
                    <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1851.png" alt="" />
                    <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1850.png" alt="" />
                </div>
                <div className="mywenda">
                    <h2>TA的问答</h2>
                    <div className="wenda">
                        {
                            this.state.wenda.map((item, index) => {
                                return (
                                    <div className="wenda_one" key={index}>
                                        <h3>{item.name}</h3>
                                        <div className="hhh">
                                            <h4>{item.shuoming}</h4>
                                            <span>{item.xingcheng}</span>
                                            <div className="xia">
                                                <p>{item.time}</p>
                                                <p>{item.msg}</p>
                                            </div>
                                        </div>

                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
        );
    }
}

export default Yonghu_xiang;